<template>
  <div style="display: flex; flex-wrap: wrap">
    <div id="chart" style="width: 100%; height:450px; margin: 0 auto"></div>
    <div class="star"></div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.getTwoCircle();
  },
  methods: {
    getTwoCircle() {
      var chart = this.$echarts.init(document.getElementById("chart"));
      // var chart1 = this.$echarts.init(document.getElementById("chart1"));
      // var chart2 = this.$echarts.init(document.getElementById("chart2"));
      // var chart3 = this.$echarts.init(document.getElementById("chart3"));
      // var chart4 = this.$echarts.init(document.getElementById("chart4"));
      var option = {
        color: ["#6f6", "#eeeeee"],
        title: {
          text: "质量问题预警",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            hoverAnimation: false, //关闭放大动画
            selectedOffset: 0, //选中块的偏移量
            label: {
              show: false,
              position: "center",
              formatter: "{d}%",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 435,
                name: "直接访问",
                selected: true, //默认选中第一块
                label: {
                  show: true, //默认显示第一块
                  fontSize: "20",
                  fontWeight: "bold",
                },
              },
              { value: 310, name: "邮件营销" },
            ],
          },
        ],
      };

      chart.setOption(option);
      // chart1.setOption(option);
      // chart2.setOption(option);
      // chart3.setOption(option);
      // chart4.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.star{
  width: 100%;
  height: 257px;
  margin:1px 2px;
  background: url(~@/assets/beijing/star.jpg) no-repeat;
}
</style>